﻿@{
    ViewBag.Title = "Products SPA Demo";
}
<script type="text/javascript" src="~/js/home.js"></script>
<input type="button" value="Save" data-bind="click:Save" />
<input type="button" value="Add" data-bind="click:AddItem" />
<div style="clear: both;">&nbsp;</div>
<section class="l-left">
    <ul data-bind="foreach: Items" class="prodlist">
        <li data-bind="click:$root.SelectedItem"><span data-bind="text:Name"></span>[<span
            data-bind="text:EntityState"></span>]<input type="button" value="X" data-bind="click:$root.DeleteItem" />
        </li>
    </ul>
</section>
<section class="l-right" data-bind="with:SelectedItem, visible: SelectedItem">
    <h1></h1>
    <ul class="prodview">
        <li>
            <label class="prodview-label" for="state">Current State</label>
            <input class="prodview-input" disabled id="state" data-bind="text:EntityState" />
        </li>
        <li>
            <label class="prodview-label" for="id">ID</label>
            <input class="prodview-input" disabled id="id" data-bind="text:ID" />
        </li>
        <li>
            <label class="prodview-label" for="name">Name</label>
            <input class="prodview-input" id="name" data-bind="text:Name" />
        </li>
        <li>
            <label class="prodview-label" for="category">Category</label>
            <input class="prodview-input" id="category" data-bind="text:Category" />
        </li>
        <li>
            <label class="prodview-label" for="price">Price</label>
            <input class="prodview-input" id="price" data-bind="text:Price" />
        </li>
        <li>
            <label class="prodview-label" for="quantity">Quantity</label>
            <input class="prodview-input" id="quantity" data-bind="text:Quantity" />
        </li>
    </ul>
</section>
